企业网站开发：网站模板添加文章自定义图片字段功能

在日常开发中我们常用的缩略图都是只需要展示在列表页就可以了，但是在企业网站开发的过程中，经常需要在产品列表和产品详情页展示自定义的产品缩略图，所以今天就专门来研究一下如何在产品详情页添加自定义缩略图的方法。

完整的添加自定义缩略图开发流程和代码：

1、在模板文件include.php中注册插件并添加执行代码：

#注册插件
RegisterPlugin("baiyesoft","ActivePlugin_baiyesoft");//baiyesoft为主题ID
function ActivePlugin_baiyesoft() {  //baiyesoft为主题ID
Add_Filter_Plugin('Filter_Plugin_Edit_Response5','baiyesoft_articleimg');//baiyesoft_articleimg为执行代码

2、在模板文件include.php中添加如下代码：

//文章缩略图
function baiyesoft_articleimg(){ //baiyesoft_articleimg为执行代码
global $zbp,$article;
if($_GET['act']=='ArticleEdt'){
if ($zbp->CheckPlugin('UEditor')) {
echo "<script type=\"text/javascript\" src=\"".$zbp->host."zb_users/theme/".$zbp->theme."/script/lib.upload.js\"></script>";
}
echo '<div class="uploadimg"><label for="meta_pic" class="editinputname">指定缩略图：</label>
<div><input type="text" name="meta_pic" class="uplod_img"  style="margin:5px 0 0 0; padding:3px; line-height:1.8em; height:1.8em; font-size:1.2em; width:84%; color:#333;"  placeholder="输入缩略图URL，留空则调用内容首张图片" value="'.htmlspecialchars($article->Metas->pic).'">';
if ($zbp->CheckPlugin('UEditor')) {
echo '<strong style="display:inline-block; cursor:pointer; background:#3A6EA5; width:15%; text-align:center; margin:5px 0 0 0; padding:5px 3px; color:#fff;">浏览文件</strong>';
}
echo '</div></div>';
}
}

3、如果需要多个自定义缩略图，可以添加如下代码：

//多个自定义缩略图
function yinuoyanxuan_articleimg(){
global $zbp,$article;
if($_GET['act']=='ArticleEdt'){
if ($zbp->CheckPlugin('UEditor')) {
echo "<script type=\"text/javascript\" src=\"".$zbp->host."zb_users/theme/".$zbp->theme."/script/lib.upload.js\"></script>";
}
echo '<div class="uploadimg"><label for="meta_pic" class="editinputname">指定缩略图：</label>
<div><input type="text" name="meta_pic" class="uplod_img"  style="margin:5px 0 0 0; padding:3px; line-height:1.8em; height:1.8em; font-size:1.2em; width:84%; color:#333;"  placeholder="输入缩略图URL，留空则调用内容首张图片" value="'.htmlspecialchars($article->Metas->pic).'">';
if ($zbp->CheckPlugin('UEditor')) {
echo '<strong style="display:inline-block; cursor:pointer; background:#3A6EA5; width:15%; text-align:center; margin:5px 0 0 0; padding:5px 3px; color:#fff;">浏览文件</strong>';
}
echo '</div></div>';
echo '<div class="uploadimg"><label for="meta_pic1" class="editinputname">指定缩略图1：</label>
<div><input type="text" name="meta_pic1" class="uplod_img"  style="margin:5px 0 0 0; padding:3px; line-height:1.8em; height:1.8em; font-size:1.2em; width:84%; color:#333;"  placeholder="输入缩略图URL，留空则调用内容首张图片" value="'.htmlspecialchars($article->Metas->pic).'">';
if ($zbp->CheckPlugin('UEditor')) {
echo '<strong style="display:inline-block; cursor:pointer; background:#3A6EA5; width:15%; text-align:center; margin:5px 0 0 0; padding:5px 3px; color:#fff;">浏览文件</strong>';
}
echo '</div></div>';
echo '<div class="uploadimg"><label for="meta_pic2" class="editinputname">指定缩略图2：</label>
<div><input type="text" name="meta_pic2" class="uplod_img"  style="margin:5px 0 0 0; padding:3px; line-height:1.8em; height:1.8em; font-size:1.2em; width:84%; color:#333;"  placeholder="输入缩略图URL，留空则调用内容首张图片" value="'.htmlspecialchars($article->Metas->pic).'">';
if ($zbp->CheckPlugin('UEditor')) {
echo '<strong style="display:inline-block; cursor:pointer; background:#3A6EA5; width:15%; text-align:center; margin:5px 0 0 0; padding:5px 3px; color:#fff;">浏览文件</strong>';
}
echo '</div></div>';
echo '<div class="uploadimg"><label for="meta_pic3" class="editinputname">指定缩略图3：</label>
<div><input type="text" name="meta_pic3" class="uplod_img"  style="margin:5px 0 0 0; padding:3px; line-height:1.8em; height:1.8em; font-size:1.2em; width:84%; color:#333;"  placeholder="输入缩略图URL，留空则调用内容首张图片" value="'.htmlspecialchars($article->Metas->pic).'">';
if ($zbp->CheckPlugin('UEditor')) {
echo '<strong style="display:inline-block; cursor:pointer; background:#3A6EA5; width:15%; text-align:center; margin:5px 0 0 0; padding:5px 3px; color:#fff;">浏览文件</strong>';
}
echo '</div></div>';
}
}

4、两种前端调用代码方式：

1)、前端调用代码方式1：

//前端调用代码方式1：
<img src="{$article->Metas->pic}">
<img src="{$article->Metas->pic1}">
<img src="{$article->Metas->pic2}">
<img src="{$article->Metas->pic3}">

2)、前端调用代码方式1：

//前端调用代码方式2：
<img src="{$article.Metas.pic}">
<img src="{$article.Metas.pic1}">
<img src="{$article.Metas.pic2}">
<img src="{$article.Metas.pic3}">

这样一个完整的添加自定义缩略图开发代码就完成了。

以上就是企业网站开发：网站模板添加文章自定义图片字段功能的全部内容，如果您也喜欢研究企业网站开发和企业网站模板，您可以加我一起多多交流学习哦。